<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父亲节快乐</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#f97316',
                        accent: '#10b981',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .text-shadow-lg {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            .animate-fall {
                animation: fall linear forwards;
            }
            .card-flip {
                perspective: 1000px;
                transform-style: preserve-3d;
            }
            .card-front, .card-back {
                backface-visibility: hidden;
                transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
            .card-back {
                transform: rotateY(180deg);
            }
            .card-flip:hover .card-front {
                transform: rotateY(180deg);
            }
            .card-flip:hover .card-back {
                transform: rotateY(0deg);
            }
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 overflow-x-hidden">
    <!-- Emoji 容器 -->
    <div id="emoji-container" class="fixed inset-0 pointer-events-none z-50"></div>

    <div class="container mx-auto px-4 py-8 relative">
        <!-- 标题部分 -->
        <header class="text-center mb-12">
            <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-primary text-shadow-lg mb-4 transition-all duration-500 hover:scale-110">
                父亲节快乐 <i class="fa fa-heart text-red-500 animate-pulse"></i>
            </h1>
            <p class="text-[clamp(1rem,3vw,1.5rem)] text-gray-700 max-w-2xl mx-auto">
                爸爸，祝你节日快乐！✨
            </p>
        </header>

        <!-- 主要内容区 -->
        <main class="max-w-4xl mx-auto">
            <!-- 卡片区域 -->
            <section class="mb-16">
                <div class="grid md:grid-cols-2 gap-8">
                    <!-- 左侧图片 -->
                    <div class="rounded-2xl overflow-hidden shadow-2xl hover:shadow-primary/20 transition-all duration-500 transform hover:-translate-y-2">
                        <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/13705b110dab499f8579f9c9cd422a60~tplv-a9rns2rl98-image.image?rk3s=8e244e95&amp;x-expires=1750561408&amp;x-signature=HDjhVv4cRB99hFNAnWRnwif50PQ%3D" alt="父亲与孩子的温馨照片" class="w-full h-full object-cover">
                    </div>
                    
                    <!-- 右侧文字 -->
                    <div class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-xl flex flex-col justify-center">
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary mb-4">亲爱的爸爸</h2>
                        <p class="text-gray-700 mb-4 text-lg">
                            在这个特别的日子里，我想对您说一声：谢谢！谢谢您一直以来的爱、支持和指导。
                        </p>
                        <p class="text-gray-700 mb-6 text-lg">
                            您是我生命中的榜样，教会了我如何成为一个坚强、有责任感的人。我爱您，永远！
                        </p>
                        <div class="flex justify-center">
                            <button id="open-gift-btn" class="bg-secondary hover:bg-secondary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-secondary/30 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-opacity-50">
                                打开我的礼物 <i class="fa fa-gift ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 礼物盒子 -->
            <section id="gift-section" class="hidden relative mb-16">
                <div class="text-center mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary mb-2">特别的礼物</h2>
                    <p class="text-gray-700">点击或点击下方盒子打开</p>
                </div>
                
                <div class="flex justify-center">
                    <div id="gift-box" class="w-64 h-64 cursor-pointer relative transition-all duration-500 hover:scale-105">
                        <!-- 盒子顶部 -->
                        <div class="gift-top absolute w-full h-16 bg-red-500 rounded-t-lg shadow-lg transform transition-transform duration-500 origin-bottom">
                            <div class="w-12 h-16 bg-red-600 absolute left-1/2 transform -translate-x-1/2 rounded-t-lg"></div>
                            <div class="w-full h-12 bg-red-600 absolute top-1/2 transform -translate-y-1/2"></div>
                        </div>
                        
                        <!-- 盒子主体 -->
                        <div class="gift-body absolute bottom-0 w-full h-48 bg-red-600 rounded-b-lg shadow-lg overflow-hidden">
                            <div class="w-12 h-full bg-red-700 absolute left-1/2 transform -translate-x-1/2"></div>
                            <div class="w-full h-12 bg-red-700 absolute top-1/2 transform -translate-y-1/2"></div>
                            
                            <!-- 礼物内容 -->
                            <div id="gift-content" class="hidden absolute inset-0 bg-white/90 backdrop-blur-sm rounded-b-lg p-6 flex flex-col items-center justify-center">
                                <h3 class="text-2xl font-bold text-primary mb-4">爸爸，我爱您！</h3>
                                <p id="custom-message" class="text-gray-700 text-center text-lg mb-6">
                                    感谢您为我做的一切，您是世界上最好的爸爸！祝您父亲节快乐，身体健康，一切顺利！
                                </p>
                                <div class="flex space-x-4">
                                    <i class="fa fa-heart text-red-500 text-3xl animate-pulse"></i>
                                    <i class="fa fa-gift text-yellow-500 text-3xl"></i>
                                    <i class="fa fa-star text-yellow-400 text-3xl animate-pulse"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 回忆卡片 -->
            <section class="mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary text-center mb-8">我们的回忆</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- 卡片 1 -->
                    <div class="card-flip rounded-xl overflow-hidden shadow-lg bg-white">
                        <div class="card-front">
                            <div class="relative">
                                <img id="memory-image-1" src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/2a1a6c7b04414d2dba2e9f2edb55a2cd~tplv-a9rns2rl98-image.image?rk3s=8e244e95&amp;x-expires=1750561276&amp;x-signature=6KJ15ixSOPKyx2zz7EyUCdH7nbE%3D" alt="与父亲的回忆照片" class="w-full h-48 object-cover">
                                <button id="edit-card-1" class="absolute bottom-2 right-2 bg-primary/80 hover:bg-primary text-white p-2 rounded-full shadow-lg transition-all transform hover:scale-110">
                                    <i class="fa fa-pencil"></i>
                                </button>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-lg text-gray-800" id="memory-title-1">第一次......</h3>
                                <p class="text-gray-600" id="memory-text-1">-----------------。</p>
                            </div>
                        </div>
                        <div class="card-back bg-gradient-to-br from-primary/90 to-blue-400 p-6 flex flex-col justify-center items-center text-white">
                            <i class="fa fa-fish text-4xl mb-4"></i>
                            <p class="text-center" id="memory-detail-1">...........。</p>
                        </div>
                    </div>
                    
                    <!-- 卡片 2 -->
                    <div class="card-flip rounded-xl overflow-hidden shadow-lg bg-white">
                        <div class="card-front">
                            <div class="relative">
                                <img id="memory-image-2" src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/57a953c16ec54949802cb59f4cde88d6~tplv-a9rns2rl98-image.image?rk3s=8e244e95&amp;x-expires=1750561298&amp;x-signature=R9ALONRv6JXh50F9Tz9%2FJ4EWbTU%3D" alt="与父亲的回忆照片" class="w-full h-48 object-cover">
                                <button id="edit-card-2" class="absolute bottom-2 right-2 bg-primary/80 hover:bg-primary text-white p-2 rounded-full shadow-lg transition-all transform hover:scale-110">
                                    <i class="fa fa-pencil"></i>
                                </button>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-lg text-gray-800" id="memory-title-2">第一次......</h3>
                                <p class="text-gray-600" id="memory-text-2">-----------------。</p>
                            </div>
                        </div>
                        <div class="card-back bg-gradient-to-br from-secondary/90 to-orange-400 p-6 flex flex-col justify-center items-center text-white">
                            <i class="fa fa-birthday-cake text-4xl mb-4"></i>
                            <p class="text-center" id="memory-detail-2">-----------------。</p>
                        </div>
                    </div>
                    
                    <!-- 卡片 3 -->
                    <div class="card-flip rounded-xl overflow-hidden shadow-lg bg-white">
                        <div class="card-front">
                            <div class="relative">
                                <img id="memory-image-3" src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/e5a6cc645f374779ae792c6bb1e03270~tplv-a9rns2rl98-image.image?rk3s=8e244e95&amp;x-expires=1750561312&amp;x-signature=lOjoWFDhPiKZw9tBtBehGEssKVk%3D" alt="与父亲的回忆照片" class="w-full h-48 object-cover">
                                <button id="edit-card-3" class="absolute bottom-2 right-2 bg-primary/80 hover:bg-primary text-white p-2 rounded-full shadow-lg transition-all transform hover:scale-110">
                                    <i class="fa fa-pencil"></i>
                                </button>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-lg text-gray-800" id="memory-title-3">第一次......</h3>
                                <p class="text-gray-600" id="memory-text-3">-----------------。</p>
                            </div>
                        </div>
                        <div class="card-back bg-gradient-to-br from-accent/90 to-green-400 p-6 flex flex-col justify-center items-center text-white">
                            <i class="fa fa-graduation-cap text-4xl mb-4"></i>
                            <p class="text-center" id="memory-detail-3">-----------------。</p>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-8">
                    <button id="open-customize-memories" class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-primary/30 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50">
                        自定义我们的回忆 <i class="fa fa-pencil-square-o ml-2"></i>
                    </button>
                </div>
            </section>

            <!-- 自定义回忆区域 -->
            <section id="customize-memories-section" class="hidden bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-xl mb-16">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary">自定义我们的回忆</h2>
                    <button id="close-customize-memories" class="text-gray-500 hover:text-gray-700 focus:outline-none">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <div class="max-w-4xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <!-- 回忆卡片 1 编辑区 -->
                        <div class="bg-white rounded-xl p-6 shadow-lg">
                            <h3 class="font-bold text-lg text-primary mb-4 flex items-center">
                                <i class="fa fa-pencil-square-o mr-2"></i> 回忆卡片 1
                            </h3>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">标题：</label>
                                <input type="text" id="edit-memory-title-1" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" value="第一次钓鱼">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">简短描述：</label>
                                <input type="text" id="edit-memory-text-1" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" value="那是我第一次和您去钓鱼，我永远不会忘记。">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">详细内容：</label>
                                <textarea id="edit-memory-detail-1" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">那天您教我如何抛竿、等待和收线，那是我最美好的童年回忆之一。</textarea>
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">图片：</label>
                                <div class="flex flex-col">
                                    <div class="flex items-center mb-2">
                                        <input type="number" id="picsum-id-1" class="w-full px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="输入picsum图片ID (1-1000)">
                                        <button id="load-picsum-1" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-r-lg transition-all transform hover:scale-105">
                                            加载
                                        </button>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="file" id="edit-memory-image-file-1" accept="image/*" class="hidden">
                                        <button id="upload-image-btn-1" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg mr-2 transition-all transform hover:scale-105">
                                            上传图片
                                        </button>
                                        <span id="image-name-1" class="text-gray-600">未选择图片</span>
                                    </div>
                                    <div class="mt-2">
                                        <img id="preview-image-1" src="https://picsum.photos/id/1012/300/200" alt="预览图片" class="w-full h-32 object-cover rounded-lg border border-gray-200">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 回忆卡片 2 编辑区 -->
                        <div class="bg-white rounded-xl p-6 shadow-lg">
                            <h3 class="font-bold text-lg text-primary mb-4 flex items-center">
                                <i class="fa fa-pencil-square-o mr-2"></i> 回忆卡片 2
                            </h3>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">标题：</label>
                                <input type="text" id="edit-memory-title-2" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" value="生日惊喜">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">简短描述：</label>
                                <input type="text" id="edit-memory-text-2" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" value="您为我准备的最难忘的生日派对。">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">详细内容：</label>
                                <textarea id="edit-memory-detail-2" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">我永远记得那天您为我准备的惊喜派对，那是我最快乐的一天。</textarea>
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">图片：</label>
                                <div class="flex flex-col">
                                    <div class="flex items-center mb-2">
                                        <input type="number" id="picsum-id-2" class="w-full px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="输入picsum图片ID (1-1000)">
                                        <button id="load-picsum-2" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-r-lg transition-all transform hover:scale-105">
                                            加载
                                        </button>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="file" id="edit-memory-image-file-2" accept="image/*" class="hidden">
                                        <button id="upload-image-btn-2" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg mr-2 transition-all transform hover:scale-105">
                                            上传图片
                                        </button>
                                        <span id="image-name-2" class="text-gray-600">未选择图片</span>
                                    </div>
                                    <div class="mt-2">
                                        <img id="preview-image-2" src="https://picsum.photos/id/1025/300/200" alt="预览图片" class="w-full h-32 object-cover rounded-lg border border-gray-200">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 回忆卡片 3 编辑区 -->
                        <div class="bg-white rounded-xl p-6 shadow-lg">
                            <h3 class="font-bold text-lg text-primary mb-4 flex items-center">
                                <i class="fa fa-pencil-square-o mr-2"></i> 回忆卡片 3
                            </h3>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">标题：</label>
                                <input type="text" id="edit-memory-title-3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" value="毕业典礼">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">简短描述：</label>
                                <input type="text" id="edit-memory-text-3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" value="您见证了我人生中最重要的时刻。">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">详细内容：</label>
                                <textarea id="edit-memory-detail-3" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">当我走上舞台领取毕业证书时，看到您眼中的骄傲，那是我最大的动力。</textarea>
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 font-medium mb-1">图片：</label>
                                <div class="flex flex-col">
                                    <div class="flex items-center mb-2">
                                        <input type="number" id="picsum-id-3" class="w-full px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="输入picsum图片ID (1-1000)">
                                        <button id="load-picsum-3" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-r-lg transition-all transform hover:scale-105">
                                            加载
                                        </button>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="file" id="edit-memory-image-file-3" accept="image/*" class="hidden">
                                        <button id="upload-image-btn-3" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg mr-2 transition-all transform hover:scale-105">
                                            上传图片
                                        </button>
                                        <span id="image-name-3" class="text-gray-600">未选择图片</span>
                                    </div>
                                    <div class="mt-2">
                                        <img id="preview-image-3" src="https://picsum.photos/id/1074/300/200" alt="预览图片" class="w-full h-32 object-cover rounded-lg border border-gray-200">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-8">
                        <button id="save-memories-btn" class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-primary/30 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50">
                            保存回忆 <i class="fa fa-save ml-2"></i>
                        </button>
                    </div>
                </div>
            </section>

            <!-- 自定义消息区域 -->
            <section class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-xl mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary mb-6 text-center">给爸爸写一段话</h2>
                
                <div class="max-w-2xl mx-auto">
                    <div class="mb-6">
                        <label for="custom-text" class="block text-gray-700 font-medium mb-2">写下你想对爸爸说的话：</label>
                        <textarea id="custom-text" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="爸爸，您是..." required="">爸爸，感谢您为我做的一切，您是世界上最好的爸爸！祝您父亲节快乐，身体健康，一切顺利！</textarea>
                    </div>
                    
                    <div class="text-center">
                        <button id="save-message-btn" class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-primary/30 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50">
                            保存祝福 <i class="fa fa-save ml-2"></i>
                        </button>
                    </div>
                </div>
            </section>
        </main>

        <!-- 页脚 -->
        <footer class="text-center py-6 text-gray-600">
            <p>父亲节快乐 © 2025</p>
            <div class="flex justify-center space-x-4 mt-4">
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-heart"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-gift"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-star"></i>
                </a>
            </div>
        </footer>
    </div>

    <!-- 自定义消息弹窗 -->
    <div id="message-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 shadow-2xl transform transition-all">
            <h3 class="text-2xl font-bold text-primary mb-4 text-center">祝福已保存！</h3>
            <p class="text-gray-700 mb-6 text-center">
                您的祝福已成功保存到礼物中。
            </p>
            <div class="text-center">
                <button id="close-modal-btn" class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 focus:outline-none">
                    确定
                </button>
            </div>
        </div>
    </div>

    <!-- 自定义回忆弹窗 -->
    <div id="memory-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 shadow-2xl transform transition-all">
            <h3 class="text-2xl font-bold text-primary mb-4 text-center">回忆已更新！</h3>
            <p class="text-gray-700 mb-6 text-center">
                您的回忆卡片已成功更新。
            </p>
            <div class="text-center">
                <button id="close-memory-modal-btn" class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 focus:outline-none">
                    确定
                </button>
            </div>
        </div>
    </div>

    <!-- 图片上传弹窗 -->
    <div id="image-upload-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 shadow-2xl transform transition-all">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-primary">上传图片</h3>
                <button id="close-image-modal-btn" class="text-gray-500 hover:text-gray-700 focus:outline-none">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="mb-6">
                <p class="text-gray-700 mb-4">请选择一张图片（支持JPG、PNG格式）</p>
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer" id="drop-area">
                    <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-2"></i>
                    <p class="text-gray-600">拖放图片到这里，或</p>
                    <button id="select-image-btn" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg mt-2 transition-all transform hover:scale-105">
                        选择图片
                    </button>
                    <input type="file" id="modal-image-input" accept="image/*" class="hidden">
                </div>
            </div>
            <div id="modal-image-preview-container" class="hidden mb-6">
                <h4 class="font-medium text-gray-700 mb-2">预览</h4>
                <div class="border border-gray-200 rounded-lg overflow-hidden">
                    <img id="modal-image-preview" src="" alt="预览图片" class="w-full h-48 object-cover">
                </div>
            </div>
            <div class="flex justify-end">
                <button id="confirm-upload-btn" class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed" disabled="">
                    确认上传
                </button>
            </div>
        </div>
    </div>

    <script>
        // 父亲节相关emoji列表
        const fatherEmojis = ['👨', '👨‍🦰', '👨‍🦱', '👨‍🦳', '👨‍🦲', '👨‍👩‍👧', '👨‍👩‍👧‍👦', '👨‍👩‍👦‍👦', '👨‍👩‍👧‍👧', '👨‍👦', '👨‍👦‍👦', '👨‍👧', '👨‍👧‍👧', '🎁', '🎉', '🎂', '👕', '👖', '👞', '👟', '💖', '💝', '💘', '🌟', '👑', '💪', '👔', '🕶', '👓', '👕', '👔', '👖', '👟', '👞', '👠', '👡', '🎯', '🚗', '🚲', '🛠', '🔧', '⚙️', '💼', '📱', '📞', '📹', '👨💻', '👨🔧', '👨🌾', '👨🍳', '👨⚕️', '👨🎨', '👨🏭', '👨🔬', '👨🚒', '👨✈️', '👨🚀', '👨⚖️', '👨🎓', '👨🏫', '👨💼', '👨⚖️', '👨🎤', '👨🏫', '👨🔧', '👨🌾', '👨🍳', '👨⚕️', '👨🎨', '👨🏭', '👨🔬', '👨🚒', '👨✈️', '👨🚀', '👨⚖️', '👨🎓', '👨🏫', '👨💼', '👨⚖️', '👨🎤'];

        // 随机掉落emoji
        function createFallingEmoji() {
            const emojiContainer = document.getElementById('emoji-container');
            const emoji = document.createElement('div');
            
            // 随机选择一个父亲节相关emoji
            const randomEmoji = fatherEmojis[Math.floor(Math.random() * fatherEmojis.length)];
            emoji.innerHTML = randomEmoji;
            
            // 设置emoji样式
            emoji.style.position = 'absolute';
            emoji.style.left = `${Math.random() * 100}vw`;
            emoji.style.fontSize = `${16 + Math.random() * 32}px`;
            emoji.style.animationDuration = `${2 + Math.random() * 6}s`;
            emoji.style.opacity = `${0.7 + Math.random() * 0.3}`;
            emoji.classList.add('animate-fall');
            
            // 添加到容器
            emojiContainer.appendChild(emoji);
            
            // 动画结束后移除emoji
            setTimeout(() => {
                emoji.remove();
            }, 8000);
        }
        
        // 定时创建emoji
        setInterval(createFallingEmoji, 500);
        
        // 页面加载后创建一些初始emoji
        window.addEventListener('load', () => {
            for (let i = 0; i < 10; i++) {
                setTimeout(createFallingEmoji, i * 200);
            }
        });
        
        // 打开礼物按钮点击事件
        const openGiftBtn = document.getElementById('open-gift-btn');
        const giftSection = document.getElementById('gift-section');
        
        openGiftBtn.addEventListener('click', () => {
            // 显示礼物区域
            giftSection.classList.remove('hidden');
            giftSection.classList.add('animate-fade-in');
            
            // 平滑滚动到礼物区域
            giftSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
        });
        
        // 礼物盒子点击事件
        const giftBox = document.getElementById('gift-box');
        const giftContent = document.getElementById('gift-content');
        
        giftBox.addEventListener('click', () => {
            // 动画效果：打开盒子
            const giftTop = giftBox.querySelector('.gift-top');
            giftTop.style.transform = 'translateY(-100%) rotateX(90deg)';
            
            // 显示礼物内容
            setTimeout(() => {
                giftContent.classList.remove('hidden');
                giftContent.classList.add('animate-fade-in');
                
                // 播放庆祝动画
                for (let i = 0; i < 30; i++) {
                    setTimeout(createFallingEmoji, i * 100);
                }
            }, 500);
        });
        
        // 保存自定义消息
        const customText = document.getElementById('custom-text');
        const customMessage = document.getElementById('custom-message');
        const saveMessageBtn = document.getElementById('save-message-btn');
        const messageModal = document.getElementById('message-modal');
        const closeModalBtn = document.getElementById('close-modal-btn');
        
        saveMessageBtn.addEventListener('click', () => {
            // 更新礼物中的消息
            customMessage.textContent = customText.value;
            
            // 显示保存成功弹窗
            messageModal.classList.remove('hidden');
            
            // 点击确定关闭弹窗
            closeModalBtn.addEventListener('click', () => {
                messageModal.classList.add('hidden');
            });
            
            // 点击弹窗外部关闭弹窗
            messageModal.addEventListener('click', (e) => {
                if (e.target === messageModal) {
                    messageModal.classList.add('hidden');
                }
            });
        });
        
        // 自定义回忆区域
        const customizeMemoriesSection = document.getElementById('customize-memories-section');
        const openCustomizeMemoriesBtn = document.getElementById('open-customize-memories');
        const closeCustomizeMemoriesBtn = document.getElementById('close-customize-memories');
        
        openCustomizeMemoriesBtn.addEventListener('click', () => {
            customizeMemoriesSection.classList.remove('hidden');
            customizeMemoriesSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
        
        closeCustomizeMemoriesBtn.addEventListener('click', () => {
            customizeMemoriesSection.classList.add('hidden');
        });
        
        // 单个卡片编辑按钮
        const editCardBtns = [
            document.getElementById('edit-card-1'),
            document.getElementById('edit-card-2'),
            document.getElementById('edit-card-3')
        ];
        
        editCardBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => {
                customizeMemoriesSection.classList.remove('hidden');
                // 滚动到对应的编辑框
                const editSection = document.querySelectorAll('#customize-memories-section .bg-white.rounded-xl')[index];
                editSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
            });
        });
        
        // 图片上传功能
        const uploadBtns = [
            document.getElementById('upload-image-btn-1'),
            document.getElementById('upload-image-btn-2'),
            document.getElementById('upload-image-btn-3')
        ];
        
        const fileInputs = [
            document.getElementById('edit-memory-image-file-1'),
            document.getElementById('edit-memory-image-file-2'),
            document.getElementById('edit-memory-image-file-3')
        ];
        
        const imageNames = [
            document.getElementById('image-name-1'),
            document.getElementById('image-name-2'),
            document.getElementById('image-name-3')
        ];
        
        const previewImages = [
            document.getElementById('preview-image-1'),
            document.getElementById('preview-image-2'),
            document.getElementById('preview-image-3')
        ];
        
        let currentCardIndex = 0; // 记录当前正在上传图片的卡片索引
        
        uploadBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => {
                currentCardIndex = index;
                fileInputs[index].click();
            });
        });
        
        fileInputs.forEach((input, index) => {
            input.addEventListener('change', (e) => {
                if (e.target.files && e.target.files[0]) {
                    const file = e.target.files[0];
                    imageNames[index].textContent = file.name;
                    
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        previewImages[index].src = event.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
        
        // picsum图片加载功能
        const loadPicsumBtns = [
            document.getElementById('load-picsum-1'),
            document.getElementById('load-picsum-2'),
            document.getElementById('load-picsum-3')
        ];
        
        const picsumIds = [
            document.getElementById('picsum-id-1'),
            document.getElementById('picsum-id-2'),
            document.getElementById('picsum-id-3')
        ];
        
        loadPicsumBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => {
                const imageId = picsumIds[index].value;
                if (imageId && imageId >= 1 && imageId <= 1000) {
                    previewImages[index].src = `https://picsum.photos/id/${imageId}/300/200`;
                    imageNames[index].textContent = `picsum图片ID: ${imageId}`;
                } else {
                    alert('请输入1-1000之间的图片ID');
                }
            });
        });
        
        // 图片上传模态框
        const imageUploadModal = document.getElementById('image-upload-modal');
        const closeImageModalBtn = document.getElementById('close-image-modal-btn');
        const dropArea = document.getElementById('drop-area');
        const selectImageBtn = document.getElementById('select-image-btn');
        const modalImageInput = document.getElementById('modal-image-input');
        const modalImagePreviewContainer = document.getElementById('modal-image-preview-container');
        const modalImagePreview = document.getElementById('modal-image-preview');
        const confirmUploadBtn = document.getElementById('confirm-upload-btn');
        
        // 打开图片上传模态框
        selectImageBtn.addEventListener('click', () => {
            modalImageInput.click();
        });
        
        // 关闭图片上传模态框
        closeImageModalBtn.addEventListener('click', () => {
            imageUploadModal.classList.add('hidden');
            clearImageModal();
        });
        
        // 点击模态框外部关闭
        imageUploadModal.addEventListener('click', (e) => {
            if (e.target === imageUploadModal) {
                imageUploadModal.classList.add('hidden');
                clearImageModal();
            }
        });
        
        // 处理文件选择
        modalImageInput.addEventListener('change', handleFileSelect);
        
        // 处理拖放
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
            dropArea.classList.add('border-primary');
            dropArea.classList.add('bg-blue-50');
        }
        
        function unhighlight() {
            dropArea.classList.remove('border-primary');
            dropArea.classList.remove('bg-blue-50');
        }
        
        dropArea.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            
            if (files.length > 0) {
                handleFiles(files[0]);
            }
        }
        
        function handleFileSelect(e) {
            if (e.target.files.length > 0) {
                handleFiles(e.target.files[0]);
            }
        }
        
        function handleFiles(file) {
            if (file.type.match('image.*')) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    modalImagePreview.src = e.target.result;
                    modalImagePreviewContainer.classList.remove('hidden');
                    confirmUploadBtn.disabled = false;
                }
                
                reader.readAsDataURL(file);
            } else {
                alert('请选择图片文件！');
            }
        }
        
        // 确认上传图片
        confirmUploadBtn.addEventListener('click', () => {
            if (modalImagePreview.src) {
                previewImages[currentCardIndex].src = modalImagePreview.src;
                imageNames[currentCardIndex].textContent = '已选择图片';
                imageUploadModal.classList.add('hidden');
                clearImageModal();
            }
        });
        
        function clearImageModal() {
            modalImageInput.value = '';
            modalImagePreview.src = '';
            modalImagePreviewContainer.classList.add('hidden');
            confirmUploadBtn.disabled = true;
            unhighlight();
        }
        
        // 保存自定义回忆
        const saveMemoriesBtn = document.getElementById('save-memories-btn');
        const memoryModal = document.getElementById('memory-modal');
        const closeMemoryModalBtn = document.getElementById('close-memory-modal-btn');
        
        saveMemoriesBtn.addEventListener('click', () => {
            // 更新回忆卡片1
            document.getElementById('memory-title-1').textContent = document.getElementById('edit-memory-title-1').value;
            document.getElementById('memory-text-1').textContent = document.getElementById('edit-memory-text-1').value;
            document.getElementById('memory-detail-1').textContent = document.getElementById('edit-memory-detail-1').value;
            document.getElementById('memory-image-1').src = document.getElementById('preview-image-1').src;
            
            // 更新回忆卡片2
            document.getElementById('memory-title-2').textContent = document.getElementById('edit-memory-title-2').value;
            document.getElementById('memory-text-2').textContent = document.getElementById('edit-memory-text-2').value;
            document.getElementById('memory-detail-2').textContent = document.getElementById('edit-memory-detail-2').value;
            document.getElementById('memory-image-2').src = document.getElementById('preview-image-2').src;
            
            // 更新回忆卡片3
            document.getElementById('memory-title-3').textContent = document.getElementById('edit-memory-title-3').value;
            document.getElementById('memory-text-3').textContent = document.getElementById('edit-memory-text-3').value;
            document.getElementById('memory-detail-3').textContent = document.getElementById('edit-memory-detail-3').value;
            document.getElementById('memory-image-3').src = document.getElementById('preview-image-3').src;
            
            // 显示保存成功弹窗
            memoryModal.classList.remove('hidden');
            
            // 点击确定关闭弹窗
            closeMemoryModalBtn.addEventListener('click', () => {
                memoryModal.classList.add('hidden');
            });
            
            // 点击弹窗外部关闭弹窗
            memoryModal.addEventListener('click', (e) => {
                if (e.target === memoryModal) {
                    memoryModal.classList.add('hidden');
                }
            });
        });
    </script>


    </body></html>